<template>
	<view class="uni-tabbar">
		<view class="uni-tabbar__item" v-for="(item,index) in tabbar" :key="index" @tap="changeTab(item)">
			<!-- 上面使用的是字体图标，解决切换页面的时候图标会闪的效果，毕竟每切换一个页面都会闪一下不太好看，可以切换使用下面的图片方式 -->
			<view v-if="true" class="uni-tabbar__bd">
				<view class="uni-tabbar__icon">
					<img v-if="item.pagePath == pagePath" class="uni-w-42 uni-h-42" :src="item.selectedIconPath" />
					<img v-else class="uni-w-42 uni-h-42" :src="item.iconPath" />
				</view>
			</view>
			<view class="uni-tabbar__label">
				{{item.text}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			pagePath: null
		},
		data() {
			return {
				showPage: false,
				containerHeight: 400,
				tabbar: [{
						"pagePath": "/pages/index/index",
						"iconPath": "/static/images/tabbar/home.png", //未选中tab图标路径
						"selectedIconPath": "/static/images/tabbar/home_active.png", //选中tab图标路径
						"text": "首页",
					},{
						"pagePath": "/pages/sport/sport",
						"iconPath": "/static/images/tabbar/sport.png", //未选中tab图标路径
						"selectedIconPath": "/static/images/tabbar/sport_active.png", //选中tab图标路径
						"text": "运动",
					},{
						"pagePath": "/pages/news/news",
						"iconPath": "/static/images/tabbar/news.png", //未选中tab图标路径
						"selectedIconPath": "/static/images/tabbar/news_active.png", //选中tab图标路径
						"text": "资讯",
					},{
						"pagePath": "/pages/my/my",
						"iconPath": "/static/images/tabbar/my.png", //未选中tab图标路径
						"selectedIconPath": "/static/images/tabbar/my_active.png", //选中tab图标路径
						"text": "我的",
					},
				],
          currentPath: ''
			};
		},
		onLoad() {
		
		},
		methods: {
			changeTab(item) {
          if (this.pagePath === item.pagePath) return
				let currentPage = item.pagePath;
				uni.showLoading({
					title: '正在加载...'
				})
				uni.redirectTo({
					url: currentPage,
					success: (e) => {
						uni.hideLoading();
					},
					fail: (e) => {
					}
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.uni-tabbar {
		position: fixed;
		bottom: 30rpx;
		z-index: 9;
		width: 686rpx;
		height: 140rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-around;
		left: 50%;
		transform: translateX(-50%);
		padding: 7rpx 0;
		box-sizing: border-box;
		background-color: #fff;
		box-shadow: 0px 10px 20px 0px rgba(75, 51, 100, 0.05);
		display: flex;
		align-items: center;
		justify-content: space-around;
		.uni-tabbar__item {
			display: flex;
			flex-direction: column;
			.uni-tabbar__bd { // tabBar单项
				.uni-tabbar__icon { // tabBar图标
					width: 43rpx;
					height: 43rpx;
					margin-bottom: 15rpx;
					img {
						width: 100%;
						height: 100%;
					}
				}
			}
 
			.uni-tabbar__label { // tabBar文字
				font-size: 20rpx;
				line-height: 20rpx;
				font-weight: 400;
				color: #999999;
				text-align: center;
				&.active {
					color: #333333;
				}
			}
		}
 
		// .uni-tabbar__icon {
		// 	height: 42upx;
		// 	line-height: 42upx;
		// 	text-align: center;
		// }
 
		.icon {
			display: inline-block;
		}
 
		// .uni-tabbar__label {
		// 	line-height: 24upx;
		// 	font-size: 24upx;
		// 	color: #999;
 
		// 	&.active {
		// 		color: #1ca6ec;
		// 	}
		// }
	}
</style>
